body {
	background-color: #fff;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 1rem;
	line-height:140%;
	color:#222;
    /*padding-top:280px;  ----- mida menu home desplegat*/
    /*padding-top:145px;  ----- primera mida que vaig utilitzar per el menu plegat*/
    /*padding-top:165px;*/
}
.wrapper{max-width:960px;margin:auto;}
small{font-weight:inherit !important;}
hr{border-top:1px dotted #aaa !important;}
pre{font-size:1.2em;}
a{color:#3d316a;}
a:hover{color:#000;}
a:visited{color:inherit;}
.clickable{cursor:pointer;}
.tachado{text-decoration:line-through; color:#c00;}
.hidden{display:none;}
.ombra{box-shadow: 0px 0px 10px #000;}
.titol{font-weight:700;}
.left {overflow:hidden; float:left;}
.right {overflow:hidden; float:right;}
.justificat {text-align:justify;}
.center {text-align:center;}
.cela{display:table-cell; padding:0 0.5em;}

.custom{color:#3d316a;}
.bg-custom{background-color:#3d316a;}
.link-custom {color:#3d316a !important;}
.link-custom:hover {color:#ef4030 !important;}

.custom2{color:#ef4030;}
.bg-custom2{background-color:#ef4030;}
.link-custom2 {color:#ef4030;}
.link-custom2:hover {color:#c0c;}

.custom3{color:#00a6e4;}
.bg-custom3{background-color:#00a6e4;}
.link-custom3, .link-custom3:visited {color:#00a6e4;}
.link-custom3:hover {color:#c00;}

.white {color:#fff!important;}
.bg-white {background-color:#fff!important;}
.link-white {color:#fff!important;}
.link-white:hover {color:#d0efe9!important;}

.clar {color:#f1f3f4!important;}
.bg-clar {background-color:#f1f3f4!important;}

.black {color:#000!important;}
.bg-black {background-color:#000!important;}
.link-black {color:#000!important;}
.link-black:hover {color:#666!important;}

.gris {color:#9fa4a6!important;}
.bg-gris {background-color:#9fa4a6!important;}

.bg-comicbcn {background-color:#ebeaf0!important;}
.bg-mangabcn {background-color:#feecec!important;}

.rodo{
	-moz-border-radius:6px; 
	-webkit-border-radius:6px;
	border-radius: 6px;  
}
.degradat{
	background:-webkit-linear-gradient(top,#fff,#ddd) ;
	background:-moz-linear-gradient(top,#fff,#ddd) ;
	background:-ms-linear-gradient(top,#fff,#ddd) ;
	background:-o-linear-gradient(top,#fff,#ddd) ;
	background:linear-gradient(top,#fff,#ddd) ;
}
.ombra{box-shadow: 0px 0px 10px #000;}

/*----------------- icon loading animated -------------------------*/
.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}
@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}
@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}
/*----------------/ icon loading animated -------------------------*/

/*----------------- estils d'impresió -------------------------*/
.printable { display: none; }
@media print {
	.non-printable { display: none; }
    .printable { display: block; }
}
/*----------------/ estils d'impresió -------------------------*/

/*----------------------------------- FONTS -----------------------*/
.font-titol-news>a{font-family:'Lato', sans-serif; font-weight:400; color:white; background-color:#ef4030; padding:0em 0em;
                    font-size:1em; line-height:130%;}
.font-titol{font-family: 'Lato', sans-serif; font-weight: 700;}
.font-titol-bold{font-family: 'Lato'; font-weight: 900;letter-spacing: 0.03em;}
.font-body-light{font-family: 'Lato', sans-serif; font-weight: 300;}
.font-body{font-family: 'Lato', sans-serif; font-weight: 400;}
.font-body-bold{font-family: 'Lato', sans-serif; font-weight: 700;}
b,strong{font-weight: 700 !important;};

.fs04{font-size:0.4em !important;}
.fs05{font-size:0.5em !important;}
.fs06{font-size:0.6em !important;}
.fs07{font-size:0.7em !important;}
.fs075{font-size:0.75em !important;}
.fs08{font-size:0.8em !important;}
.fs09{font-size:0.9em !important;}
.fs10{font-size:1em !important;}
.fs11{font-size:1.1em !important;}
.fs12{font-size:1.2em !important;}
.fs13{font-size:1.3em !important;}
.fs14{font-size:1.4em !important;}
.fs15{font-size:1.5em !important;}
.fs16{font-size:1.6em !important;}
.fs17{font-size:1.7em !important;}
.fs18{font-size:1.8em !important;}
.fs19{font-size:1.9em !important;}
.fs20{font-size:2em !important;}
.fs21{font-size:2.1m !important;}
.fs22{font-size:2.2em !important;}
.fs23{font-size:2.3em !important;}
.fs24{font-size:2.4em !important;}
.fs25{font-size:2.5em !important;}
.fs30{font-size:3em !important;}
.fs35{font-size:3.5em !important;}
.fs40{font-size:4em !important;}
.fs45{font-size:4.5em !important;}
.fs47{font-size:4.7em !important;}
.fs50{font-size:5em !important;}

.lh100{line-height:100% !important;}
.lh110{line-height:110% !important;}
.lh120{line-height:120% !important;}
.lh130{line-height:130% !important;}
.lh140{line-height:140% !important;}
.lh150{line-height:150% !important;}
.lh160{line-height:160% !important;}
.lh165{line-height:165% !important;}
.lh170{line-height:170% !important;}
.lh180{line-height:180% !important;}
.lh190{line-height:190% !important;}
.lh200{line-height:200% !important;}

/* Imágenes responsive */
img.my-imagen-responsive {width:100%;height:auto;}
img.my-imagen-responsive-v{height:100% !important;}

.compartir{overflow:hidden;}
	/*---- addthis -----
	.addthis{}
	.addthis a{color:#000;}
	.atss{top:250px !important;}*/

.divSpace{overflow:hidden; height:40px;}	
.divMenuSpace{overflow:hidden; height:57px;}
#divTop{text-align:center;padding:3em 0.5em; background-color:transparent;color:white;position:absolute;z-index:10;width:100%}
#divTopRight{text-align:right;padding:4em 2em 0 0; background-color:transparent;color:white;position:absolute;z-index:11;width:100%}
#divBottom{}
/*#logoTop{max-width:200px; margin-left:1px;}*/
#divMouse{width:100%;position:absolute;z-index:100;text-align:center;left:0;bottom:5em;}
#divMouse > img{cursor:pointer;filter: grayscale(100%) brightness(300%);}

/*----- menu left ---------------------------*/
#divMenuLeft{
    position:fixed;
    z-index:2010;
    top:0;left:-420px;
    width:100%;height:100vh;
    max-width:420px;
    background-color:white;
    color:red;
    padding:5.5em 1em;
    text-align:left;
    overflow:auto;
}
#menu-open{
    position:fixed;
    z-index:2000;
    top:2.5em;left:2em;
    background-color:transparent;
    color:white;
    padding:0;
    font-size:1.4em
}
#menu-open:hover{text-decoration:underline;}
#menu-close{
    position:absolute;
    z-index:10;
    top:1em;right:1em;
    background-color:transparent;
    color:#00a6e4;
    padding:0.3em 0.4em;
    font-size:2em
}
#menu-open:hover, #menu-close:hover {color:red;}

.ulMenuLeft{list-style:none; display:block; text-align:left; margin:0; padding:0; background-color:transparent;}
	.ulMenuLeft li{display:block; margin:0.5em 0em;font-size:1.3em}
		.ulMenuLeft li a{color:#999;}
		.ulMenuLeft li a:hover{color:white;}	
		.ulMenuLeft .active > a{color:white;}
        
/*---------------- menu idiomes -------------------------*/
.ulIdiomes{list-style:none; display:block; text-align:right; margin:0; padding:0; background-color:transparent;}
	.ulIdiomes li{display:inline-block; margin:0 0.5em 0 0.5em;font-size:1.3em;font-weight:700;}
		.ulIdiomes li a{color:white;}
		.ulIdiomes li a:hover{color:white;}	
		.ulIdiomes .active > a{color:red;}
/*----------------/ menu idiomes -------------------------*/

/*---------------- menu xarxes -------------------------*/
.ulXarxes{list-style:none; display:block; text-align:left; margin:0; padding:0; background-color:transparent;}
	.ulXarxes li{display:inline-block; margin:0 1em 0 0.25em;font-size:1em}
        .ulXarxes li a{color:#aaa;}
		.ulXarxes li a:hover{color:white;}	
		.ulXarxes .active > a{color:white;}
        
.ulXarxesBottom {text-align:center;}
    .ulXarxesBottom li{}
    .ulXarxesBottom li a{color:#666;}
    .ulXarxesBottom li a:hover{color:#000;}

.ulXarxesCBMB{list-style:none; display:flex; justify-content:center; text-align:center; margin:0; padding:0; background-color:transparent;}
	.ulXarxesCBMB li{display:flex; justify-content:center; align-items:center;
                        margin:0 0.5em; font-size:1.2em; background-color:#ef4030; width:2.4em; height:2.4em;padding:1.5em;}
    .ulXarxesCBMB li:hover{background-color:#3d316a;}
    .ulXarxesCBMB li a{color:#3d316a;}
    .ulXarxesCBMB li:hover > a{color:#ef4030;}
/*----------------/ menu xarxes -------------------------*/

/*---------------- menu legal -------------------------*/	
#divMenuLegal{width:100%; text-align:center; margin:0 0 0 0;}	
	#divMenuLegal ul{list-style:none; padding:0; margin:0;}
		#divMenuLegal ul li{display:inline-block; cursor:pointer; font-size:0.75em; margin:0 0.7em; color:#fff;}
			#divMenuLegal a{color:#fff;}
			#divMenuLegal a:hover{color:#fff;}
            
#myModalLegal_response td{padding:0.2em 0.5em !important;vertical-align:top;}            
/*----------------/ menu legal -------------------------*/

/*----------------------------------- PERSONALITZACIÓ BOOTSTRAP -----------------------**/
.btn:hover {cursor:pointer;color:inherit;}
/*.btn-danger {color:#fff !important;}*/
.btn-custom {
    color: #fff;
    background-color: #3d316a;
    border-color: #3d316a;
	font-weight: 600;
    font-size: 0.9em;
    padding:0.5em 2em;
    border-radius:0;
    letter-spacing: 0.10em;
}
.btn-custom:hover {
    color: #3d316a;
    background-color: #9fa4a6;
    border-color: #9fa4a6;
}
.btn-custom:not([disabled]):not(.disabled).active, .btn-custom:not([disabled]):not(.disabled):active, .show>.btn-custom.dropdown-toggle {
    color: #000;
    background-color: #fff;
    border-color: #444;
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,.5);
}

.btn-custom2{
    color: #fff !important;
    background-color: #ef4030;
    border-color: #ef4030;
	font-weight: 600;
    font-size: 0.9em;
    border-radius:0;
    padding:1em 2.5em;
    letter-spacing: 0.15em;
}
.btn-custom2:hover {
    color: #fff !important;
    background-color: #3d316a;
    border-color: #3d316a;
}
.btn-black {
    color: #fff !important;
    background-color: #000;
    border-color: #fff;
	/*font-weight: 600;*/
    font-size: 1.1em;
    border-radius:0.65;
    /*padding:1em 2.5em;
    letter-spacing: 0.15em;*/
    position:relative;
}
.btn-black:hover {
    background-color: #fff;
    border-color: #000;
    color: #000 !important;
}
.btn-clar:hover>.sageta-up-buto {filter: saturate(65%) brightness(48%) hue-rotate(275deg);}
.sageta-up-buto{position:absolute;top:-8px;left:calc(50% - 8px);}

.btn-custom-line {
    color: #3d316a !important;
    background-color: #fff;
    border: 2px solid #3d316a;
	font-weight: 600;
    font-size: 0.8em;
    border-radius:0;
    padding:0.5em 2.5em;
    letter-spacing: 0.15em;
}
.btn-custom-line:hover {
    color: #fff !important;
    background-color: #3d316a;
}
.btn-custom-lineinv {
    color: #fff !important;
    background-color: transparent;
    border: 2px solid #fff;
	font-weight: 600;
    font-size: 0.8em;
    border-radius:0;
    padding:0.5em 2.5em;
    letter-spacing: 0.15em;
}
.btn-custom-lineinv:hover {
    color: #000 !important;
    background-color: #fff;
}

.btn-custom3-lineinv {
    color: #fff !important;
    background-color: transparent;
    border: 2px solid #fff;
	font-weight: 600;
    font-size: 0.8em;
    border-radius:0;
    padding:0.5em 2.5em;
    letter-spacing: 0.15em;
}
.btn-custom3-lineinv:hover {
    color: #00a6e4 !important;
    background-color: #fff;
}

.panel-breadcrumb a{color:#ccc;}
.panel-breadcrumb a:hover{color:#fff;}

/*--------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/
/*----- portatil vinx / meritxell ---------------------------*/
@media screen and (max-device-width:1366px),screen and (max-width:1366px){
}

/*----- portatil 1200 / 1280 ---------------------------*/
@media screen and (max-device-width:1199px),screen and (max-width:1199px){
}

/*----- lg -> ipad horizontal + ipad pro vertical ---------------------------*/
@media screen and (max-device-width:1024px),screen and (max-width:1024px){
    #divBottom{padding-bottom:5em;}
}

/*----- sm ---------------------------*/
@media screen and (max-device-width:991px),screen and (max-width:991px){
    #divTop{padding-top:3.5em;}
    #divTopRight{padding:1.75em 0.85em 0 0;}
    #divMenuLeft{padding:5.5em 1em;}
    #menu-open{top:1.2em;left:1em;}
}

/*----- ipad vert vertical ---------------------------*/
@media screen and (max-device-width:767px),screen and (max-width:767px){
}

/*----- iphone 6+ horizontal ---------------------------*/
@media screen and (max-device-width:736px),screen and (max-width:736px){
    #divTop{padding-top:5em;}
    #divTop img {max-height:100px;}
}

/*----- iphone 6/7/8  horizontal ---------------------------*/
@media screen and (max-device-width:667px),screen and (max-width:667px){
    #divMenuLeft{padding:3em 1em;}
    #menu-close{top:1em;}
}

/*----- iphone 5 horizontal ---------------------------*/
@media screen and (max-device-width:568px),screen and (max-width:568px){
}

/*----- iphone 6/7/8 vertical ---------------------------*/
@media screen and (max-device-width:480px),screen and (max-width:480px){
}

/*----- iphone 5 vertical ---------------------------*/
@media screen and (max-device-width:320px),screen and (max-width:320px){
}

/*---------------- bootstrap z-indexs --------------------------
$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;
---------------------------------------------------------------*/